<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生标注系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .student-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .student-item {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        .student-name {
            font-size: 14px;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .student-info {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }

        .marked {
            background-color: #ffcccb;
        }

        button {
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
        }

        button:hover {
            background-color: #45a049;
        }

        .reset-button {
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

        .filter-container {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-container select {
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .filter-container label {
            font-weight: bold;
        }

        .score-high {
            color: #2ecc71;
        }

        .score-medium {
            color: #f39c12;
        }

        .score-low {
            color: #e74c3c;
        }
    </style>
</head>

<body>
    <div class="filter-container">
        <label for="class-filter">班级：</label>
        <select id="class-filter" onchange="filterStudents()">
            <option value="all">所有班级</option>
        </select>

        <label for="status-filter">状态：</label>
        <select id="status-filter" onchange="filterStudents()">
            <option value="all">全部学生</option>
            <option value="unmarked">未标注学生</option>
            <option value="marked">已标注学生</option>
        </select>

        <label for="score-filter">成绩：</label>
        <select id="score-filter" onchange="filterStudents()">
            <option value="all">全部成绩</option>
            <option value="high">高分(≥90)</option>
            <option value="medium">中等(60-89)</option>
            <option value="low">低分(<60)< /option>
            <option value="missing">缺考/缺</option>
        </select>
    </div>

    <div class="student-list" id="student-list">
        <!-- 学生信息将通过JavaScript动态生成 -->
    </div>

    <button class="reset-button" onclick="resetMarks()">重置所有标注</button>

    <script>
        const STORAGE_KEY = 'student_data';
        const CLASS_FILTER_KEY = 'selected_class_filter';
        const STATUS_FILTER_KEY = 'selected_status_filter';
        const SCORE_FILTER_KEY = 'selected_score_filter';

        // 从本地存储加载数据
        function loadLocalData() {
            const data = localStorage.getItem(STORAGE_KEY);
            return data ? JSON.parse(data) : null;
        }

        // 保存筛选状态
        function saveFilterState() {
            localStorage.setItem(CLASS_FILTER_KEY, document.getElementById('class-filter').value);
            localStorage.setItem(STATUS_FILTER_KEY, document.getElementById('status-filter').value);
            localStorage.setItem(SCORE_FILTER_KEY, document.getElementById('score-filter').value);
        }

        // 获取学生是否被标注
        function getMarkedStatus(studentId) {
            return localStorage.getItem(`marked-${studentId}`) === 'true';
        }

        // 加载并展示学生信息
        function loadStudents() {
            const classFilter = document.getElementById('class-filter').value;
            const statusFilter = document.getElementById('status-filter').value;
            const scoreFilter = document.getElementById('score-filter').value;

            const localData = loadLocalData();
            if (!localData) {
                console.error('没有找到学生数据');
                return;
            }

            // 获取所有班级并更新筛选器
            const classes = [...new Set(localData.map(s => s.class))].sort((a, b) => a - b);
            updateClassFilter(classes);

            // 筛选学生
            const filteredStudents = localData.filter(student => {
                // 班级筛选
                const classMatch = classFilter === 'all' || student.class == classFilter;

                // 状态筛选
                const isMarked = getMarkedStatus(student.id);
                const statusMatch =
                    statusFilter === 'all' ||
                    (statusFilter === 'marked' && isMarked) ||
                    (statusFilter === 'unmarked' && !isMarked);

                // 成绩筛选
                let scoreMatch = true;
                if (scoreFilter !== 'all') {
                    const score = student.score;
                    if (score === '缺考' || score === '缺') {
                        scoreMatch = scoreFilter === 'missing';
                    } else if (typeof score === 'number') {
                        if (scoreFilter === 'high') scoreMatch = score >= 90;
                        else if (scoreFilter === 'medium') scoreMatch = score >= 60 && score < 90;
                        else if (scoreFilter === 'low') scoreMatch = score < 60;
                        else scoreMatch = false;
                    } else {
                        scoreMatch = false;
                    }
                }

                return classMatch && statusMatch && scoreMatch;
            });

            // 显示学生
            displayStudents(filteredStudents);
        }

        // 更新班级筛选器
        function updateClassFilter(classes) {
            const classFilter = document.getElementById('class-filter');
            const savedClass = localStorage.getItem(CLASS_FILTER_KEY);

            // 保留当前选中的班级
            const currentSelected = classFilter.value;

            // 更新选项
            classFilter.innerHTML = '<option value="all">所有班级</option>';
            classes.forEach(cls => {
                const option = document.createElement('option');
                option.value = cls;
                option.textContent = cls;
                classFilter.appendChild(option);
            });

            // 恢复保存的选择或保持当前选择
            if (savedClass && classes.includes(parseInt(savedClass))) {
                classFilter.value = savedClass;
            } else if (classes.includes(parseInt(currentSelected))) {
                classFilter.value = currentSelected;
            }
        }

        // 显示学生列表
        function displayStudents(students) {
            const container = document.getElementById('student-list');
            container.innerHTML = '';

            students.forEach(student => {
                const isMarked = getMarkedStatus(student.id);
                const item = document.createElement('div');
                item.className = `student-item ${isMarked ? 'marked' : ''}`;
                item.id = `student-${student.id}`;
                item.onclick = () => toggleMark(student.id);

                // 添加学生信息
                const nameEl = document.createElement('div');
                nameEl.className = 'student-name';
                nameEl.textContent = student.name;

                const infoEl = document.createElement('div');
                infoEl.className = 'student-info';
                infoEl.innerHTML = `
                    <div>${student.class}班 ${student.seat}号</div>
                    <div>考号: ${student.id}</div>
                `;

                const scoreEl = document.createElement('div');
                scoreEl.className = 'student-info';

                // 处理成绩显示
                const score = student.score;
                let scoreClass = '';
                if (score === '缺考' || score === '缺') {
                    scoreEl.textContent = '成绩: 缺考';
                    scoreClass = 'score-missing';
                } else if (typeof score === 'number') {
                    scoreEl.textContent = `成绩: ${score}`;
                    if (score >= 90) scoreClass = 'score-high';
                    else if (score >= 60) scoreClass = 'score-medium';
                    else scoreClass = 'score-low';
                } else {
                    scoreEl.textContent = '成绩: -';
                }
                scoreEl.className = `student-info ${scoreClass}`;

                item.appendChild(nameEl);
                item.appendChild(infoEl);
                item.appendChild(scoreEl);
                container.appendChild(item);
            });
        }

        // 切换标注状态
        function toggleMark(studentId) {
            const item = document.getElementById(`student-${studentId}`);
            const isMarked = item.classList.contains('marked');

            if (isMarked) {
                item.classList.remove('marked');
                localStorage.setItem(`marked-${studentId}`, 'false');
            } else {
                item.classList.add('marked');
                localStorage.setItem(`marked-${studentId}`, 'true');
            }
        }

        // 筛选学生
        function filterStudents() {
            saveFilterState();
            loadStudents();
        }

        // 重置所有标注
        function resetMarks() {
            const localData = loadLocalData();
            if (localData) {
                localData.forEach(student => {
                    localStorage.setItem(`marked-${student.id}`, 'false');
                });
                loadStudents();
            }
        }

        // 初始化页面
        window.onload = function () {
            // 恢复筛选状态
            const savedClass = localStorage.getItem(CLASS_FILTER_KEY);
            const savedStatus = localStorage.getItem(STATUS_FILTER_KEY);
            const savedScore = localStorage.getItem(SCORE_FILTER_KEY);

            if (savedClass) document.getElementById('class-filter').value = savedClass;
            if (savedStatus) document.getElementById('status-filter').value = savedStatus;
            if (savedScore) document.getElementById('score-filter').value = savedScore;

            // 加载学生数据
            loadStudents();
        };
    </script>
</body>

</html>